<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app" v-cloak>
			<table  width="540" border="1" cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<th style="width: 26px;;"></th>
						<th>书籍名称</th>
						<th>出版日期</th>
						<th>价格</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in book" style="text-align: center;">
					  <td>{{index+1}}</td>
					  <td>{{item.name}}</td>
					  <td>{{item.date}}</td>
					  <td>￥{{item.price.toFixed(2)}}</td>
					  <td>
						<button @click="reduceCount(index)":disabled="item.count===1">-</button>
						{{item.count}}
						<button @click="addCount(index)">+</button>
					  </td>
					  <td>
					  <button @click="remove(index)">移除</button>
					  </td>
					</tr>
				</tbody>
			 </table>
			 <h3>总价格：￥{{totalPrice}}</h3>
			</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			 el: '#app', //挂载的标签
			 data: { //数据
				book: [ //数组对象
				 {
				 	date:'2010-10',
				 	price:60,
				 	count:1,
				 	name:'《java从入门到放弃》'
				 }, {
				 	date:'2012-10',
				 	price:90,
				 	count:1,
				 	name:'《PHP从入门到放弃》'
				 }, {
				 	date:'2013-10',
				 	price:80.01,
				 	count:1,
				 	name:'《Python从入门到放弃》'
				 }, {
				 	date:'2011-10',
				 	price:70.02,
				 	count:1,
				 	name:'《什么从入门到放弃》'
				 }]
			 },
			 computed: { //总价格的计算
			   totalPrice: function () {
			   var total = 0;
			   for (var i = 0; i < this.book.length; i++) {
			   var item = this.book[i];
			   total += item.price * item.count;
			   }
			   return total.toLocaleString();
			   }
			 },
			 methods: {
				//减一
			   reduceCount: function (index) {
			   if (this.book[index].count === 1) return;
			   this.book[index].count--;
			   },
			   //加一
			   addCount: function (index) {
			   this.book[index].count++;
			   },
			   //移除
			   remove: function (index) {
			   console.log("remove-index:" + index);
			   this.book.splice(index, 1);
			   }
			 }
			});
		</script>	
	</body>
</html>